import React, { useRef, useState } from 'react';
import { connect } from 'umi';
import TableDataBlock from '@/components/TableDataBlock';
import { reloadTab } from '@/utils/utils';
import { notification } from 'antd';
import { Button, Modal, Tag, Space } from 'antd';
import PopImgShow from '@/components/PopImgShow';
const AuthFormSetting = (props) => {
  const {
    visible,
    onClose,
    loading,
    dispatch,
    handleCallback,
    list,
    defaultSelectList = [],
    handleTask
  } = props;
  const desabledList = defaultSelectList.reduce((val, item) => {
    const { sectionId, sectionGoodsList = [], goodsId } = item
    if (sectionId) {
      return [...val, ...sectionGoodsList.map(o => { return o.goodsId })]
    }
    else {
      return [...val, goodsId]
    }
  }, [])
  console.log(defaultSelectList)
  const { show = false, } = visible;
  const childRef = useRef();
  // 确认提交
  const handleUpAudit = () => {
    if (selectedRowKeys.length === 0) {
      return notification.warning({
        message: '温馨提示',
        description: '请至少选择一个数据',
      });
    }
    else {
      handleTask(selectedRowKeys.map(item => { return item.id }))
    }

  };
  const [selectedRowKeys, setSelectedRowKeys] = useState([])
  const rowSelection = {
    type: 'checkBox',
    hideSelectAll: true,
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedRowKeys(selectedRows);
    },
    getCheckboxProps: (record) => ({
      disabled: desabledList.filter(item => {
        console.log(item, record)

        return item == record.id
      }).length > 0,
      // Column configuration not to be checked
      id: record.id,
    }),
    selectedRowKeys: selectedRowKeys.map((item) => {
      return item.id.toString();
    }),
    preserveSelectedRowKeys: true,
  };

  const getColumns = [
    {
      title: '视频名称',
      dataIndex: 'goodsName',
    },
    {
      title: '视频封面',
      dataIndex: 'cover',
      render: (e = []) => {
        return <PopImgShow width={24} url={e.split(',')[0]}></PopImgShow>
      }
    },
    {
      title: '上架时间',
      dataIndex: 'createTime',

    },
  ];
  const modalProps = {
    title: `关联已有视频`,
    width: 900,
    visible: show,
    maskClosable: true,
    destroyOnClose: true,
    zIndex: 1001,
    confirmLoading: loading,
    footer: <Space>
      <Button onClick={() => onClose()}>取消</Button>
      <Button type='primary' onClick={() => handleUpAudit()}>确定</Button>
    </Space>,
  };

  return (
    <Modal {...modalProps} onCancel={onClose} onOk={handleUpAudit}>
      <TableDataBlock
        cRef={childRef}
        rowSelection={rowSelection}
        loading={loading}
        noCard={true}
        columns={getColumns}
        rowKey={(record) => `${record.id}`}
        dispatchType="selectionWindow/fetchListVideo"
        {...list}
      ></TableDataBlock>
    </Modal>
  );
};

export default connect(({ selectionWindow, loading }) => ({
  list: selectionWindow.videoList,
  loading: loading.models.selectionWindow
}))(AuthFormSetting);
